<template>
	<view class="tab-bar">
		<block v-for="(item, index) in list" :key="index">
			<view class="tab-bar-item" :class="{ selected: selected === index }"
				@tap.stop.native="switchTab(item.pagePath, index)">
				<image :src="selected === index ? item.selectedIconPath : item.iconPath" class="tab-bar-icon"></image>
				<text class="tab-bar-text">{{ item.text }}</text>
				<view class="box">
					<up-badge max="99" :value="item.value"></up-badge>
				</view>
			</view>
		</block>
	</view>
</template>
<script>
	export default {
		props: {
			selected: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				searchText:"",
				// selected: 0,
				// list: [{
				// 		pagePath: "/pages/tabbar/chat",
				// 		iconPath: "/static/tarbar/messages-false.png",
				// 		selectedIconPath: "/static/tarbar/messages-true.png",
				// 		text: "消息"
				// 	},
				// 	{
				// 		pagePath: "/pages/tabbar/friend-business",
				// 		iconPath: "/static/tarbar/business-false.png",
				// 		selectedIconPath: "/static/tarbar/business-true.png",
				// 		text: "友商"
				// 	},
				// 	{
				// 		pagePath: "/pages/tabbar/friend",
				// 		iconPath: "/static/tarbar/contacts-false.png",
				// 		selectedIconPath: "/static/tarbar/contacts-true.png",
				// 		text: "通讯录"
				// 	},
				// 	{
				// 		pagePath: "/pages/tabbar/find",
				// 		iconPath: "/static/tarbar/discover-false.png",
				// 		selectedIconPath: "/static/tarbar/discover-true.png",
				// 		text: "发现"
				// 	},
				// 	{
				// 		pagePath: "/pages/tabbar/mine-new",
				// 		iconPath: "/static/tarbar/user-false.png",
				// 		selectedIconPath: "/static/tarbar/user-true.png",
				// 		text: "我的"
				// 	}
				// ]
			};
		},
		computed:{
			friend() {
				let count = 0;
				count = this.noticeStore.sum
				return count;
			},
			privateChats() {
				return this.chatStore.privateChats.filter(e => e.showName && e.showName.includes(this.searchText))
			},
			chat() {
				let count = 0;
				this.privateChats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			friendBusinessChats() {
				return this.chatStore.friendBusinessChats.filter(e => e.showName && e.showName.includes(this.searchText))
			},
			business() {
				let count = 0;
				this.friendBusinessChats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			list(){
				return [{
						pagePath: "/pages/tabbar/chat",
						iconPath: "/static/tarbar/messages-false.png",
						selectedIconPath: "/static/tarbar/messages-true.png",
						text: "消息",
						value:this.chat
					},
					{
						pagePath: "/pages/tabbar/friend-business",
						iconPath: "/static/tarbar/business-false.png",
						selectedIconPath: "/static/tarbar/business-true.png",
						text: "友商",
						value:this.business
					},
					{
						pagePath: "/pages/tabbar/friend",
						iconPath: "/static/tarbar/contacts-false.png",
						selectedIconPath: "/static/tarbar/contacts-true.png",
						text: "通讯录",
						value:this.friend
					},
					{
						pagePath: "/pages/tabbar/find",
						iconPath: "/static/tarbar/discover-false.png",
						selectedIconPath: "/static/tarbar/discover-true.png",
						text: "发现"
					},
					{
						pagePath: "/pages/tabbar/mine-new",
						iconPath: "/static/tarbar/user-false.png",
						selectedIconPath: "/static/tarbar/user-true.png",
						text: "我的"
					}
				]
			}
		},
		methods: {
			switchTab(url, index) {
				uni.switchTab({
					url
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.tab-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 90px;
		background-color: #fcfcfc;
		border-top: 1px solid #eaeaea;
		z-index: 999;
	}

	.tab-bar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding-top: 8rpx;
		.box{
			position: absolute;
			top: 20rpx;
			right: 30rpx;
		}
	}

	.tab-bar-icon {
		width: 45rpx;
		height: 45rpx;
	}

	.tab-bar-text {
		font-size: 22rpx;
		color: #a4a7ae;
	}

	.selected .tab-bar-text {
		color: #2970ff;
	}
</style>